<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 刘世琪
 * @Date: 2021-01-14 17:04:04
 * @LastEditors: Seven
 * @LastEditTime: 2021-01-21 21:16:03
-->
<template>
    <div>
        <!-- 头部区域 -->
    <Header></Header>
    <!-- 头部区域 -->
        <!-- 说明 -->
        <div class="udlite-container partners">
        <p>
            <!-- &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; -->
            <!-- &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; -->
                    欢迎进入我的个人中心
        </p>
        </div>
        <a>
            <van-notice-bar left-icon="volume-o" :scrollable="false">
                <van-swipe
                    vertical
                    class="notice-swipe"
                    :autoplay="3000"
                    :show-indicators="false"
                >
                <van-swipe-item>欢迎
                    <van-tag color="#00FFFF">
                        <router-link to="/my_home">{{username}}</router-link> 
                    </van-tag>
                        用户登录成功
                    </van-swipe-item>
                    <van-swipe-item>{{this.imgs}}</van-swipe-item>
                    <van-swipe-item>持续更新....</van-swipe-item>
                    </van-swipe>
            </van-notice-bar> 
        </a>
        <br>
        <el-tabs :tab-position="tabPosition" style="height: 1000px;">
    <el-tab-pane label="用户管理">
        <table>
            <tr>
                <th>头&emsp;像</th>
                <th>用户名</th>
                <th>密&emsp;码</th>
                <th>性&emsp;别</th>
                <th>手机号</th>
                <th>邮&emsp;箱</th>
                <th>修改密码</th>
                <th>上传头像</th>
                <th>删除头像</th>
            </tr>
            <tr>
            <th>
                <van-image
                    round
                    width="10rem"
                    height="10rem"
                    :src="'http://127.0.0.1:8000/' + user_list.img"
                /></th>
                    <th> {{ user_list.username }}</th>
                    <th>**********</th>
                    <th>{{ user_list.gender }}</th>
                    <th>{{ user_list.phone }}</th>
                    <th>{{ user_list.email }}</th>
                    <th><van-button type="warning" @click="update()">修改</van-button></th>
                    <th class="udlite-container partners">
                    <van-uploader :after-read="afterRead" />
                    </th>
                    <th>
                    <van-button type="danger" @click="del" v-show="user_list.img != null"
                        >删除头像</van-button
                    >
                    </th>
            </tr>
        </table>
      
      </el-tab-pane>
    <el-tab-pane label="课程添加"><Add_Course></Add_Course></el-tab-pane>
    <el-tab-pane label="课程展示"><Course_list></Course_list></el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
  
        <!-- <div class="udlite-container partners"> -->

        <!-- </div> -->
        <!-- 身部区域 -->
    <!-- <Body></Body> -->
    <!-- 身部区域 -->
    
    

     <!-- 尾部区域 -->
    <!-- <Footer></Footer> -->
    <!-- 尾部区域 -->
    
    </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
import Add_Course from './Add_Course'
import Course_info from './Course_info'
import Course_list from './Course_list'
import axios from 'axios'
export default {
    components:{Header,Footer,Add_Course,Course_list,Course_info},
    data() {
        return {
            username: localStorage.username,
            username:localStorage.getItem('username'),
            token:localStorage.getItem('token'),
            uid:localStorage.getItem('uid'),
            user_list:{},
            tabPosition: 'left',
            // 添加成功提示语
            imgs:"",
        }
    },
    methods: {
        // 修改密码
        update(uid) {
            var password = prompt('请输入新密码')
            if(password == ''){
                this.$toast('新密码不能为空')
                return
            }
            if(password === null){
                this.$toast('取消修改')
                return
            }
            var password1 = prompt('确认密码')
            if(password1 === null){
                this.$toast('取消修改')
                return
            }
            if(password != password1){
                this.$toast('两次密码输入不正确')
                return
            }else{
                axios({
                    url:'http://127.0.0.1:8000/user/',
                    method:'put',
                    params:{
                       token: this.token, 
                    },
                    data:{
                        password: password,
                    },
                }).then(res=>{
                    console.log(res.data)
                    this.$toast(res.data.msg)
                    localStorage.removeItem('username')
                    localStorage.removeItem('token')
                    this.$router.push({
                        name:'My_Login'
                    })
                })
            }
        },
        // 上传图片
        afterRead(file) {
            // 定义参数
            let data = new FormData();
            data.append("file", file.file); // 创建实例
            const axiosInstance = this.axios.create({ withCredentials: false }); 
            axiosInstance({
                method: "put",
                url: "http://127.0.0.1:8000/upimg/?token=" + this.token,
                data: data,
            }).then(res=>{
                console.log(res.data);
                this.$toast(res.data.msg);
                this.imgs = res.data.msg;
                // this.$router.go(0);
            })
        },
        del(){
            axios({
                url: "http://127.0.0.1:8000/downimg/",
                method: "put",
                params:{
                    token: this.token,
                }
            }).then(res=>{
                console.log(res.data);
                this.$toast(res.data.msg);
                this.$router.go(0);
            })
        }            
    },
    // 获取用户
    created() {
        console.log(this.uid)
        axios({
            url:'http://127.0.0.1:8000/user/',
            params:{
                num:this.uid
            }
        }).then(res=>{
            console.log(res.data)
            this.user_list = res.data
        })
    }
}
</script>

 <style>
  .notice-swipe {
    height: 40px;
    width: 500px;
    line-height: 40px;
  }
table{
    border-collapse: collapse;
    margin: 0% auto;
    /* border:1; */
}
tr,th{
    border: 1px solid blue;
    width: 100px;
}
</style>


